<template>
	<view class="com-content">
		<!--领装备-->
		<view class="body-box2">
			<view class="box-top">
				<view class="box-tit" v-if="datalist.equip_status === 2">
					<view class="icon-tb icons icon-daka"></view>领装备
					<view class="comp_content_sta" :class="datalist.equip_status===2?'sign_no':'sign_on'">
						{{datalist.equip_status===2?'未领取':'已领取'}}
					</view>
				</view>
				<view class="box-tit" v-else-if="datalist.equip_status === 1">
					<view class="icon-tb icons icon-daka"></view>领装备
					<view class="comp_content_sta" :class="datalist.equip_status===1?'sign_no':'sign_on'">
						{{datalist.equip_status===2?'未领取':'已领取'}}
					</view>
					<text class="tit-text">{{datalist.equip_date}}</text>
				</view>
				<view class="box-top-r" @click="checks('1',checked1)">{{checked1?'隐藏二维码':'显示二维码'}}</view>
			</view>
			<view class="box-con" v-if="checked1">
				<view class="box-con-ewm">
					<image @click="chakan(datalist.equip_qr_img)" class="box-ewm" style="width: 246rpx;height: 246rpx;"
						:src="datalist.equip_qr_img"></image>
				</view>
				<view class="box-txt">(领装备码)</view>
			</view>
		</view>
		<!--检录-->
		<view class="body-box2">
			<view class="box-top">
				<view class="box-tit" v-if="datalist.sign_status === 2">
					<view class="icon-tb icons icon-daka"></view>检录
					<view class="comp_content_sta" :class="datalist.sign_status===2?'sign_no':'sign_on'">
						{{datalist.sign_status===2?'未检录':'已检录'}}
					</view>
				</view>
				<view class="box-tit" v-else-if="datalist.sign_status === 1">
					<view class="icon-tb icons icon-daka"></view>检录
					<view class="comp_content_sta" :class="datalist.sign_status===1?'sign_no':'sign_on'">
						{{datalist.sign_status===2?'未检录':'已检录'}}
					</view>
					<text class="tit-text">{{datalist.sign_date}}</text>
				</view>
				<view class="box-top-r" @click="checks('2',checked2)">{{checked2?'隐藏二维码':'显示二维码'}}</view>
			</view>
			
			<view class="box-con" v-if="checked2">
				<view class="box-con-ewm">
					<image @click="chakan(datalist.sign_qr_img)" class="box-ewm" style="width: 246rpx;height: 246rpx;"
						:src="datalist.sign_qr_img"></image>
				</view>
				<view class="box-txt">(检录码)</view>
			</view>
		</view>

		<!--队伍信息-->
		<view class="body-box">
			<view class="box-tit2">
				<!-- <image class="icon-dw" src="/static/clockIn/team.png" /> -->
				<view class="box-tit-l">
					<view class="icon-tb icons icon-duoren"></view>
					<text
						class="txt-jc">团队名称：{{datalist.team_name}}（{{datalist.user_count}}人）编号：{{datalist.team_code}}</text>
				</view>
				<view class="box-tit-r" v-if="datalist.user_edit===1" @click="toedit(datalist.id)">编辑</view>

			</view>
			<!--队长+队员-->
			<view class="box-team2">
				<block v-for="(item,index) in datalist.user" :key="index">
					<view class="box-team-li">
						<view class="box-team-l">
							<image class="icon-duiyuan" :class="item.type===1?'icon-dz':'icon-dy'"
								:src="item.type===1?duizhang:duiyuan" />
							<text>{{item.type===1?'队长：':'队员：'}}</text>
							<text class="box-team-l-name">{{item.name}}</text>{{item.mobile}}
						</view>
						<view class="box-team-r" @click="callpho(item.mobile)">
							<image class="icon-dh" src="/static/clockIn/pho.png" />
							<view>拨号</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 打卡码 -->
		<view class="body-box2">
			<view class="box-top">
				<view class="box-tit">
					<!-- <image class="icon-dt" src="/static/clockIn/address.png" /> -->
					<view class="icon-tb icons icon-dizhi"></view>
					<view class="tit-txt">打卡码<text class="tit-text">（提示：该打卡码只针对本次比赛）</text></view>
				</view>
				<view class="box-top-r" @click="checks('3',checked3)">{{checked3?'隐藏二维码':'显示二维码'}}</view>
			</view>
			
			<view class="box-con" v-if="checked3">
				<view class="box-con-ewm">
					<image @click="chakan(datalist.clock_qr_img)" class="box-ewm" style="width: 246rpx;height: 246rpx;"
						:src="datalist.clock_qr_img"></image>
				</view>
				<view class="box-txt">(打卡码)</view>
			</view>
		</view>

		<!--打卡点-->
		<view class="body-box">
			<view class="box-top">
				<view class="box-tit">
					<!-- <image class="icon-dt" src="/static/clockIn/address.png" /> -->
					<view class="icon-tb icons icon-dizhi"></view>
					<view class="tit-txt">打卡点<text class="tit-text">（提示：比赛打卡点在比赛当天公布)</text></view>
				</view>
				<view class="box-top-r" @click="dellink">查看地图</view>
			</view>
			
			<view class="box-tit3">
				<view class="tit-txt">路线：
					<block v-for="(item,ind) in datalist.sign_data" :key="ind">
						<view v-if="item.site === 'start'">{{item.route_name}}</view>
					</block>
				</view>
				<view class="tit-text">（注：除起终点外,其他任务点可自行选择打卡顺序。)</view>
			</view>
			<!--打卡-->
			<view class="box-clockIn" v-if="datalist.sign_data.length>0">
				<block v-for="(item,index) in datalist.sign_data" :key="index">
					<record-info :isload="isload" :record="item" @recordid="recordid" @imgDelete="imgDelete"
						@ChooseSuccess="ChooseSuccess"></record-info>
				</block>
			</view>
			<view class="box-clockIn2" v-if="datalist.sign_data.length===0">
				<image class="box-clockIn-img" src="/static/clockIn/no-daka.png"></image>
				<text class="box-clockIn-txt">暂无打卡点公布</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import recordInfo from '@/pages/user/components/record_info.vue'
	import imageUpload from '@/components/image-upload/image-upload.vue'
	export default {
		components: {
			recordInfo,
			imageUpload
		},
		props: {
			datalist: {
				type: Object,
				default () {
					return []
				}
			},
			isload: {
				type: String,
				default: '1'
			}
		},
		data() {
			return {
				duizhang: '/static/clockIn/captain.png',
				duiyuan: '/static/clockIn/icon-dy.png',
				checked1:false,
				checked2:false,
				checked3:false,
				/* datalist: {
					statu: '2',
					ewm: '',
					title: '2021春季城市穿越大型2021春季城市穿越大型',
					time: '2021/04/07 08:00',
					teamname: '秋名山战神队',
					clock_sta: '2',
					clock_num: '6',
					clock_on_num: '3',
					captain: {
						head: '',
						name: '亚克托斯',
						pho: '13583948345',
					},
					team_m: [],
					record:[
						{
							no:'qd',
							clock_sta: '2',
							clock_address: '观音山商务中心打卡点1',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},{
							no:'xx',
							clock_sta: '2',
							clock_address: '观音山商务中心打卡点2',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},{
							no:'xx',
							clock_sta: '1',
							clock_address: '观音山商务中心打卡点3',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},{
							no:'zd',
							clock_sta: '1',
							clock_address: '观音山商务中心打卡点4',
							time: '2021/04/07 08:00',
							img_url:'',
							teamname: '秋名山战神队'
						},
					]
				}, */
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		methods: {
			dellink(){
				this.$emit('dellink')
			},
			checks(type,checked){
				if(type === '1'){
					this.checked1 = !checked
				}else if(type === '2'){
					this.checked2 = !checked
				}else if(type === '3'){
					this.checked3 = !checked
				}
			},
			ChooseSuccess(tempFilePaths) { //选择图片返回
				this.$emit('ChooseSuccess', tempFilePaths)
			},
			imgDelete() {
				this.$emit('imgDelete')
			},
			chakan(url) {
				this.$emit('chakan', url)
			},
			recordid(id) {
				this.$emit('recordid', id)
			},
			toedit(id) {
				this.$emit('toedit', id)
			},
			callpho(pho) {
				this.$emit('callpho', pho)
				/* uni.makePhoneCall({
				    phoneNumber: pho
				}); */
			},
			onclick() {
				this.$emit('onclick')
			},
			//跳转比赛详情
			/* clickdet(type, item) {
				uni.navigateTo({
					url: `/pages/index/race_detail?type=${type}&data=${JSON.stringify(item)}`
				})
			} */
		}
	}
</script>

<style lang="scss" scoped>
	.icon-tb {
		margin-right: 20rpx;
		font-weight: bold;
		color: #777;
	}

	.sign_no {
		background-color: #eee;
		color: #333;
	}

	.sign_on {
		background-color: #02BB6F;
		color: #fff;
	}

	.icon-dz-address {
		width: 71rpx;
		height: 82rpx;
		margin-right: 10rpx;
	}

	.icon-dt {
		width: 22rpx;
		height: 28rpx;
		margin-right: 18rpx;
	}

	.icon-dw {
		width: 28rpx;
		height: 24rpx;
		margin-right: 18rpx;
	}

	.icon-dz {
		width: 34rpx;
		height: 26rpx;
		margin-right: 18rpx;
	}

	.icon-dy {
		width: 32rpx;
		height: 32rpx;
		margin-right: 19rpx;
	}

	.icon-dh {
		width: 22rpx;
		height: 24rpx;
		margin-right: 5rpx;
	}

	.icon-tx {
		width: 30rpx;
		height: 30rpx;
		border-radius: 15rpx;
		margin-right: 12rpx;
	}

	.com-content {
		display: flex;
		flex-direction: column;
	}

	.body-box {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		padding: 30rpx 32rpx;

		.box-clockIn2 {
			display: flex;
			flex-direction: column;
			align-items: center;

			.box-clockIn-img {
				width: 397rpx;
				height: 226rpx;
				margin-bottom: 30rpx;
			}

			.box-clockIn-txt {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}

		.body-box-text {
			font-size: 28rpx;
			line-height: 50rpx;
			color: #999;

			text {
				color: #333;
			}
		}

		.box-team2 {
			display: flex;
			flex-direction: column;

			.box-team-li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				height: 25px;
				margin-bottom: 30rpx;

				.box-team-l {
					display: flex;
					align-items: center;

					.box-team-l-name {
						margin-right: 10rpx;
					}
				}

				.box-team-r {
					display: flex;
					align-items: center;
					color: #02BB6F;
				}
			}
		}

		.box-team2.box-team-li:nth-of-type(2) .box-team-l.icon-duiyuan {
			display: none !important;
		}

		.box-team {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 30rpx;

			.box-team-l {
				display: flex;
				align-items: center;

				.box-team-l-name {
					margin-right: 10rpx;
				}
			}

			.box-team-r {
				display: flex;
				align-items: center;
				color: #02BB6F;
			}
		}

		.box-tit3 {
			display: flex;
			flex-direction: column;
			border-bottom: 1rpx solid #f9f9f9;
			padding-bottom: 15rpx;
			margin-bottom: 15rpx;

			.tit-txt {
				display: flex;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 15rpx;
				font-weight: 600;
			}

			.tit-text {
				font-size: 24rpx;
				color: #FE5050;
			}
		}
		.box-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #f9f9f9;
			padding-bottom: 15rpx;
			margin-bottom: 15rpx;
		
			.box-tit {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				width: calc(100% - 160rpx);
				.tit-txt{
					float: left;
				}
		
				.tit-text {
					font-size: 24rpx;
					color: #FE5050;
				}
		
				.txt-jc {
					font-weight: bold;
				}
		
				.comp_content_sta {
					border-radius: 15rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 18rpx;
					padding: 0 10rpx;
					margin-left: 20rpx;
				}
			}
		
			.box-top-r {
				width: 140rpx;
				font-size: 22rpx;
				color: #fff;
				background: #02BB6F;
				text-align: center;
				font-weight: 500;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20px;
			}
		}

		.box-tit2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			border-bottom: 1rpx solid #f9f9f9;
			padding-bottom: 15rpx;
			margin-bottom: 15rpx;

			.box-tit-l {
				display: flex;
				align-items: center;

				.txt-jc {
					font-weight: bold;
				}

				.comp_content_sta {
					border-radius: 15rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 18rpx;
					padding: 0 10rpx;
					margin-left: 20rpx;
				}
			}

			.box-tit-r {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
				text-align: right;
			}

		}

		.box-con {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 155px;

			.box-con-ewm {
				width: 123px;
				height: 123px;
			}

			.box-txt {
				height: 30px;
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}

	.body-box2 {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		padding: 30rpx 32rpx;

		.box-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.box-tit {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				width: calc(100% - 160rpx);
				.tit-txt{
					float: left;
				}

				.tit-text {
					font-size: 24rpx;
					color: #FE5050;
				}

				.txt-jc {
					font-weight: bold;
				}

				.comp_content_sta {
					border-radius: 15rpx;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 18rpx;
					padding: 0 10rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
			}

			.box-top-r {
				width: 140rpx;
				font-size: 22rpx;
				color: #fff;
				background: #02BB6F;
				text-align: center;
				font-weight: 500;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 20px;
			}
		}

		.box-con {
			border-top: 1rpx solid #f9f9f9;
			margin-top: 15rpx;
			padding-top: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.box-con-ewm {
				width: 246rpx;
				height: 246rpx;
			}

			.box-txt {
				font-size: 28rpx;
				font-weight: 500;
				color: #999999;
			}
		}
	}
</style>
